<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>管理员列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输管理员名称" clearable @clear="search" v-model="mname" >
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary">添加管理员</el-button>
        </el-col>
      </el-row>

      <el-table :data="managerList" border stripe>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="管理员名称" prop="userName"></el-table-column>
        <el-table-column label="手机" prop="cellphone"></el-table-column>
        <el-table-column label="邮箱" prop="email"></el-table-column>
        <el-table-column
            prop="locked"
            label="状态"
            width="100"
            :filters="[{ text: '0', value: '正常' }, { text: '1', value: '冻结' }]"
            :filter-method="filterTag"
            filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag
                :type="scope.row.locked === '0' ? 'success' : 'danger'"
                disable-transitions>{{scope.row.locked==0?'正常':'冻结'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="warning" size="mini"  @click="editManagerDialog(scope.row)">修改</el-button>
            <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[3, 6, 12, 24]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-card>

    <!--修改管理员-->
    <el-dialog title="修改管理员" :visible.sync="editManagerDialogFormVisible" :close-on-click-modal="false">
      <el-form ref="editManagerForm" :rules="editManagerRules" :model="editManager" label-width="150px" size="mini">
        <el-form-item label="管理员名称" prop="userName">
          <el-input v-model="editManager.userName" disabled></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="cellphone">
          <el-input v-model="editManager.cellphone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editManager.email"></el-input>
        </el-form-item>

        <el-form-item label="是否冻结" prop="locked">
          <el-radio v-model="editManager.locked" label="1">是</el-radio>
          <el-radio v-model="editManager.locked" label="0">否</el-radio>
        </el-form-item>

        <el-form-item label="选择角色" prop="roleIds">
          <el-select v-model="editManager.roleIds" multiple @change="updateRole" placeholder="请选择角色">
            <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="editManagerDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="modifyManager">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "Manager",
  data(){
    return{
      editManagerDialogFormVisible:false,
      mname:'',
      managerList:[],
      pageNum:1,
      pageSize:3,
      total:0,
      editManager:{
        id:0,
        userName:'',
        cellphone:'',
        email:'',
        locked:'',
        roleIds:[],
        insertTime:''
      },
      editManagerRules:{

      },
      options:[
        {id:11,name:'A'},{id:14,name:'B'},{id:3,name:'C'}
      ]
    }
  },
  methods:{
    updateRole(){
      this.$forceUpdate();
    },
    //保存修改
    modifyManager(){
      this.$axios.put("manager/modifyManager",this.editManager)
      .then((data)=>{
        if (data.data.code == 200){
          this.editManagerDialogFormVisible = false ;
          this.searchManager();
          this.$message({
            type: 'success',
            message: data.data.msg ,
            duration:1000
          });
        }else {
          this.$message({
            type: 'error',
            message: data.data.msg ,
            duration:1000
          });
        }
      })
    },
    search(){
      this.pageNum =1 ;
      this.searchManager();
    },
    //打开修改对话框
    editManagerDialog(obj){
      this.editManager = obj ;

      //查询管理员拥有的角色
      this.$axios.get("role/getRoleIdByMid/"+obj.id)
      .then((data)=>{
        if (data.data.code == 200){
          this.editManager.roleIds = data.data.data ;
          //等查询结束  在打开页面
          this.editManagerDialogFormVisible = true ;
        }else {
          this.$message({
            type: 'error',
            message: data.data.msg ,
            duration:1000
          });
        }
      })

    },
    del(id){

    },
    filterTag(value, row) {
      console.log(value,row);
      return row.locked === value;
    },
    handleSizeChange(size){
      this.pageNum = 1;
      this.pageSize = size ;
      this.searchManager();
    },
    handleCurrentChange(now){
      this.pageNum = now ;
      this.searchManager();
    },
    searchManager(){
      this.$axios.get("manager/managerList",{
        params:{
          mname:this.mname,
          now:this.pageNum,
          size:this.pageSize
        }
      }).then((d)=>{
        if (d.data.code == 200){
          console.log(d.data.data.records)
          this.pageNum = d.data.data.current;
          this.pageSize = d.data.data.size;
          this.total = d.data.data.total ;
          this.managerList = d.data.data.records ;
        }else {
          this.$message({
            type: 'error',
            message: data.data.msg ,
            duration:1000
          });
        }
      })
    },
    initAllRole(){
      this.$axios.get("role/getAllRoles")
      .then((data)=>{
        if (data.data.code == 200){
          this.options = data.data.data ;
        }else {
          this.$message({
            type: 'error',
            message: data.data.msg ,
            duration:1000
          });
        }
      })
    }
  },
  created(){
    this.searchManager();
    this.initAllRole();
  }
}
</script>

<style scoped>

</style>